<template>
  <div class="approval-page">
    <!-- 左侧信息列 -->
    <div class="left-column">
      <!-- 基本信息卡片 -->
      <div class="info-card">
        <h3 class="card-title">基本信息</h3>
        <ul class="info-list">
          <li>
            <span class="label">单据编号</span>
            <span class="value">{{ info.checkoutNo }}</span>
          </li>
          <li>
            <span class="label">老人姓名</span>
            <span class="value">{{ info.name }}</span>
          </li>
          <li>
            <span class="label">老人身份证号</span>
            <span class="value">{{ info.idCardNo }}</span>
          </li>
          <li>
            <span class="label">联系方式</span>
            <span class="value">{{ info.contact }}</span>
          </li>
          <li>
            <span class="label">费用期限</span>
            <span class="value">{{ info.stayStart }} —— {{ info.stayEnd }}</span>
          </li>
          <li>
            <span class="label">护理等级</span>
            <span class="value">{{ info.careLevel }}</span>
          </li>
          <li>
            <span class="label">入住床位</span>
            <span class="value">{{ info.bedNo }}</span>
          </li>
          <li>
            <span class="label">签约合同</span>
            <span class="value">
              {{ info.contractNo }}
              <a :href="info.contractUrl" target="_blank" class="view-link">查看</a>
            </span>
          </li>
          <li>
            <span class="label">养老顾问</span>
            <span class="value">{{ info.consultant }}</span>
          </li>
          <li>
            <span class="label">护理员</span>
            <span class="value">{{ info.caregiverName }}</span>
          </li>
        </ul>
      </div>

      <!-- 申请信息卡片 -->
      <div class="info-card" style="margin-top: 20px;">
        <h3 class="card-title">申请信息</h3>
        <ul class="info-list">
          <li>
            <span class="label">退住日期</span>
            <span class="value">{{ info.checkoutTime }}</span>
          </li>
          <li>
            <span class="label">退住原因</span>
            <span class="value">{{ info.checkoutReason }}</span>
          </li>
          <li>
            <span class="label">备注</span>
            <span class="value">{{ info.remark }}</span>
          </li>
          <li>
            <span class="label">申请人</span>
            <span class="value">{{ info.applicant }}</span>
          </li>
          <li>
            <span class="label">申请时间</span>
            <span class="value">{{ info.applyTime }}</span>
          </li>
        </ul>
      </div>
    </div>


    <!-- 右侧操作记录列 -->
    <div class="right-column">
      <!-- 操作记录卡片 -->
      <div class="record-card">
        <h3 class="card-title">操作记录</h3>
        <ul class="record-list">
          <li class="record-item">
            <div class="item-icon">
              <!-- 替换为“发起申请”图标 -->
              <img src="@/assets/images/avatar.jpg" alt="发起申请" />
            </div>
            <div class="item-content">
              <div class="item-desc">发起申请-申请退住</div>
              <div class="item-status">顾廷烨（已发起）</div>
            </div>
            <div class="item-time">2048-10-15 09:00:00</div>
          </li>
          <li class="record-item">
            <div class="item-icon">
              <!-- 替换为“审批通过”图标 -->
              <img src="@/assets/images/avatar.jpg" alt="审批通过" />
            </div>
            <div class="item-content">
              <div class="item-desc">（角色）审批-申请审批</div>
              <div class="item-status">盛明兰（已通过）</div>
              <!-- 审批意见提示框 -->
              <div class="approval-opinion">这里是审批意见。</div>

            </div>

            <div class="item-time">2048-10-15 09:00:00</div>

          </li>

        </ul>
      </div>
    </div>

    <!-- 底部返回按钮 -->
    <div class="btn-area">
      <el-button type="default" @click="goBack">返回</el-button>
    </div>
  </div>
</template>

<script>
import {getCheckout} from "@/api/check/checkout.js"
export default {
  name: "ApprovalPage",
  data() {
    return {
      info: {
        id: "",                 // 主键（新增时可为空）
        checkoutNo: "",         // 退住编号
        title: "",              // 标题
        elderId: "",            // 老人ID
        businessId: "",         // 业务ID（流程实例ID，可为空）
        name: "",               // 姓名
        idCardNo: "",           // 身份证号
        contact: "",            // 联系方式
        stayStart: "",          // 入住开始时间（如 "2024-05-01"）
        stayEnd: "",            // 入住结束时间（如 "2025-10-01"）
        careLevel: "",          // 护理等级（如 "一级护理"）
        bedNo: "",              // 入住床位号
        contractUrl: "",        // 签约合同URL
        contractNo: "",         // 合同编号
        consultant: "",         // 养老顾问
        caregiverName: "",      // 护理员名称
        checkoutTime: "",       // 退住时间（如 "2025-10-15"）
        checkoutReason: "",     // 退住原因
        applicant: "",          // 申请人姓名
        applicantId: "",        // 申请人ID
        applicantDept: "",      // 申请人部门编号
        applyTime: "",          // 申请时间（如 "2025-10-15T10:30:00"）
        createdAt: "",          // 创建时间（自动生成可为空）
        updatedAt: "",
        processStatus: '',// 更新时间（自动生成可为空）
        remark:""}


    };
  },
  methods: {
    goBack() {
      this.$router.push("/CollaborationWork/tasking");// 路由回退
    },
  },
  mounted() {
    getCheckout(this.id).then(
        res => {
          this.info = res.data
        }
    )
  },
  props: {
    id: {
      type: [Number,String],
      default: 0,
    },
  },

};
</script>

<style scoped>
.approval-page {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 20px;
}

.left-column {
  width: 60%;
}

.right-column {
  width: 38%;
}

.info-card,
.record-card {
  border: 1px solid #ebeef5;
  border-radius: 4px;
  padding: 20px;
}

.card-title {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 20px;
}

.info-list {
  list-style: none;
  padding: 0;
}

/* 标签右对齐样式 */
.info-list li {
  display: flex;
  margin-bottom: 15px;
}

.info-list .label {
  width: 120px;
  text-align: right;
  margin-right: 15px;
  color: #606266;
}

.info-list .value {
  flex: 1;
}

.view-link {
  color: #409eff;
  text-decoration: none;
  margin-left: 5px;
}

/* 操作记录核心样式（流程线 + 布局） */
.record-list {
  list-style: none;
  padding: 0;
  position: relative; /* 作为伪元素的定位容器 */
}

.record-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 30px;
}
.record-item:last-child {
  margin-bottom: 0;
}

/* 垂直主线：连接所有记录项（除第一个），从头像中间穿过 */
.record-item:not(:first-child)::before {
  content: '';
  position: absolute;
  left: 20px; /* 与40px宽图标中心对齐（40/2=20） */
  top: 41px;
  height: 30px;
  width: 2px;
  background-color: #dcdcdc; /* 浅灰色流程线 */
}

.item-icon {
  margin-right: 12px;
}

.item-icon img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}

.item-content {
  flex: 1;
}

.item-desc {
  font-weight: 500;
}

.item-status {
  color: #909399;
  font-size: 12px;
}

/* 审批意见提示框 */
.approval-opinion {
  background-color: #f5f7fa;
  border: 2px solid #000000;
  border-radius: 4px;
  padding: 10px;
  width: 100%;
  margin-top: 5px;
  font-size: 12px;
  color: #606266;
}

.item-time {
  color: #909399;
  font-size: 12px;
  white-space: nowrap; /* 防止时间换行 */
}

/* 底部按钮 */
.btn-area {
  margin-top: 40px;
  text-align: center;
  width: 100%;
}

.btn-area button {
  margin: 0 20px;
}
</style>